<template>
  <div class="side-bar-wrap">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
          <span class="side-bar-title">全部分类</span>
        </template>
        <div class="side-bar-con">
          <div
            class="side-bar-item flex-yc a"
            :class="{ active: item.boardId === chooseId }"
            @click="chooseBoard(item.boardId)"
            v-for="item in sideBarData"
            :key="item.boardId"
          >
            <el-icon class="iconfont">
              <img :src="item.cover" alt=""></el-icon>
            <span>{{ item.boardName }}</span>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, defineEmits } from 'vue'
import {getTotalLoadBoard} from '@/pages/forum/api/huati';
import {MsgError} from "@/utils/utils";
import {LoadBoardList} from "@/pages/forum/types/loadBoard";
let sideBarData:LoadBoardList = reactive([]);
let leftTotalSideBarData:LoadBoardList = reactive([]);
const emit = defineEmits(['getBarData', 'getChooseId']);
let activeNames = reactive<string[]>([]);
let chooseId = ref<number>();
const handleChange = (val: string[]) => {
  console.log(val)
}
async function getTotalBoard () {
  let result = await getTotalLoadBoard();
  if (!result || result.code !== 200) return MsgError(result?.msg || '获取分类失败');
  sideBarData = result.data.map((i, x) => {
      return {
        boardId: i.boardId,
        boardName: i.boardName,
        cover: i.cover,
        sort: i.sort
      }
  })
  let transfData = sideBarData.slice(0);
  sideBarData.unshift({
    boardId: 1111,
    boardName: '全部',
    cover: '',
    sort: 0
  })
  sideBarData.push({
    boardId: 6666,
    boardName: '收藏',
    cover: '',
    sort: 10
  })
  sideBarData.push({
    boardId: 7777,
    boardName: '话题',
    cover: '',
    sort: 11
  })
  activeNames.push('1');
  //默认第一个
  chooseId.value = sideBarData.length ? sideBarData[0].boardId : 0;
  //传递到父组件，不用调2次接口
  emit('getBarData', transfData);
  console.log(sideBarData, 'sideBarData')
}
function chooseBoard(id) {
  chooseId.value = id;
  emit('getChooseId', id);
}
onMounted(() => {
  getTotalBoard();
})
</script>

<style scoped lang="scss">
.side-bar-wrap {
  width: 208px;
  padding: 24px 28px;
  background-color: #fff;
  border-radius: 4px;

  :deep {
    .el-collapse,
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      border: none;
    }

    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }

  .side-bar-title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
  }

  .side-bar-con {
    .side-bar-item {
      padding: 10px 24px;
      margin: 13px 0;
      font-size: 15px;
      font-weight: 500;
      border-radius: 4px;

      &.active,
      &:hover {
        color: #fff;
        background-color: $primary;
      }
      .iconfont {
        margin-right: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }

    }
  }
}
</style>
